<template>
  <div name="TypeSelect" class="full">
    <el-card class="centerA">
      <el-form
        :model="form"
        ref="ruleForm"
        label-width="10em"
        class="demo-ruleForm"
      >
        <el-form-item label="课程类型" prop="region">
          <el-select v-model="form.selectedType" placeholder="请选择课程类型">
            <el-option
              v-for="item in classType"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">开始听课</el-button>
        </el-form-item></el-form
      >
    </el-card>
  </div>
</template>

<script>
import { getClassType } from "../../api/dictionaries";
export default {
  name: "TypeSelect",
  props: {},
  components: {},
  data() {
    return {
      form: {
        selectedType: "",
      },
      classType: [],
    };
  },
  mounted() {
    this.fetchClassType();
  },
  methods: {
    submitForm() {
      if (!this.form.selectedType) {
        this.$message.error("请选择课程类型");
        return;
      }
      this.$router.push({
        path: "/addForm",
        query: { selectedType: this.form.selectedType },
      });
    },
    async fetchClassType() {
      const res = await getClassType();
      if (res.status === 200) {
        res.data.result.forEach((item) => {
          let obj = {};
          obj.text = item.name;
          obj.id = item.id;
          this.classType.push(obj);
        });
      } else {
        this.$message.error("信息获取失败");
      }
    },
  },
  computed: {},
};
</script>

<style scoped>
.el-card {
  width: 30em;
  height: 12em;
  top: 40%;
}
.el-button {
  width: 12em;
  height: 3em;
  margin-top: 2em;
  /* margin-left: 3em; */
}
</style>
